<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/head.jsp" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%> 
<!DOCTYPE HTML>
<html>
<head>

<title>用户管理-菜单信息</title>
<style type="text/css">

		html,
body {
  height:100%;
  margin:0;
  padding:0;
  font:small/1.5 "宋体", serif; 
  overflow-y: hidden;
}


</style>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/easyui/1.5.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/easyui/1.5.3/themes/icon.css?v=20171205">

<script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/easyui/1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script> 

</head>
<body>

  <shiro:hasPermission name="/ma/findMenus">
  	<table id="menus" title="菜单" class="easyui-treegrid" style="width:100%;height:100%"
		 	data-options="url:'./findMenus', rownumbers:'true',idField:'menu_id', treeField:'menu_name', toolbar:menu_toolbar"
		 	 >
        	<thead>
            	<tr>
                		<th data-options="field:'menu_name',align:'left'" width="200">菜单名称</th>
                        <th data-options="field:'menu_id'" width="120">菜单ID</th>
                        <th data-options="field:'parent_id'" width="120">上级ID</th>
                       
                        <th data-options="field:'menu_url',align:'left'" width="220">菜单地址</th>
                        <th data-options="field:'is_visible',formatter:function(v){
                        	if(v){
                        		return '显示' ;
                        	} else {
                        		return '隐藏';
                        	}
                        },styler:function(v){
                        	if(!v){
                        		return 'color:#AA0000;'; 
                        	} else {
                        		return 'color:#00AA00;';
                        	}
                        }" width="80">是否可见</th>
                        <th data-options="field:'menu_type',align:'left',formatter:function(v){
                        	if(v == 1){
                        		return '页面' ;
                        	} else if(v == 2){
                        		return '功能菜单';
                        	}
                        	return '' ;
                        }" width="130">菜单类型</th>
                	  
            	</tr>
        	</thead>
   	 	</table>
   	 	 
   	 	<shiro:hasPermission name="/ma/addMenu or /ma/updateMenu">
   	 		<div id="menu_ma"   class="easyui-dialog" title="菜单信息" data-options="iconCls:'icon-save',closed:true,resizable:true,modal:true" style="width:400px;height:360px;padding:10px;display: none;">
	 		 <form id="ff" method="post"> 
         		<div style="margin-bottom:10px">
                	<input class="easyui-textbox" name="parent_id" id="parent_id"  style="width:95%" data-options="label:'上级ID:',readonly:true,labelPosition:'left',required:true"> 
            	</div>
           	 	<div style="margin-bottom:10px">
                	<input class="easyui-textbox" name="menu_id" id="menu_id"  style="width:95%" data-options="label:'菜单ID:',labelPosition:'left',required:true"> 
            	</div>
            	<div style="margin-bottom:10px">
            	    <input class="easyui-textbox" name="menu_name" id="menu_name" style="width:95%" data-options="label:'菜单名称:',labelPosition:'left',required:true"> 
            	</div>
            	<div style="margin-bottom:10px">
               	 <input class="easyui-textbox" name="menu_url" id="menu_url" style="width:95%" data-options="label:'菜单URL:',labelPosition:'left'">
            	</div>
            	<div style="margin-bottom:10px">
              	  <input class="easyui-textbox" name="menu_icon" id="menu_icon" style="width:95%" data-options="label:'菜单图标:',labelPosition:'left'">
            	</div>
            	<div style="margin-bottom:10px">
              	  <select  class="easyui-combobox" name="menu_type"  id="menu_type" style="width:95%" data-options="label:'菜单类型:',labelPosition:'left',panelHeight:60">
              	  	 <option value="1" selected="selected">页面/菜单栏</option>
                	 <option value="2">功能选项</option>
              	  </select>
            	</div> 
            	<div style="margin-bottom:10px">
              	  <select class="easyui-combobox" name="is_visible"  id="is_visible" style="width:95%" data-options="label:'是否可见:',labelPosition:'left',panelHeight:60">
              	  	 <option value="true" selected="selected">可见</option>
                	 <option value="false">隐藏</option>
              	  </select>
            	</div> 
        	</form>
        	<div style="text-align:center;padding:5px 0">
            	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#ff').form('submit');" style="width:80px">保存</a>
            	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#menu_ma').dialog('close');" style="width:80px">关闭</a>
        	</div>
	 	</div>
	 	 
   	 	</shiro:hasPermission>
   	 	
   	 	<div id="menu_toolbar" style="padding:2px 5px;">
	 		<shiro:hasPermission name="/ma/addMenu">
	 			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addMenu()"> 添加</a>
	 			<script type="text/javascript">
	 			function addMenu() {
	 				
	 				
	 		 		$('#ff').form('clear');
	 		    	//判断当前选择的机构
	 		    	var select = $('#menus').treegrid('getSelected');
	 		    	if(select && select.menu_id) {
	 		    		 
	 		    		$('#parent_id').textbox('setValue', select.menu_id);
	 		    	}  else {
	 		    		
	 		    		 $.messager.alert('提示','请先在菜单树中选择一个父级菜单项,顶层菜单项只能由管理员在后台创建!','warning');
	 		    		 return ;
	 		    	}
	 		    	 
	 		    	$('#menu_ma').dialog('open');
	 		    	
	 		    	$('#ff').form({
	 		    	    url: './addMenu', 
	 		    	    success:function(data){
	 		    	       	var ret =JSON.parse(data) ;
	 		    	        //console.log(data.error + "  " + data.success);
	 		    	        if(ret.error) {
	 		    	        	 $.messager.alert('提示',ret.error,'warning');
	 		    	        }else if(ret.success) {
	 		    	        	$('#menu_ma').dialog('close');
	 		    	        	  
	 		 	    	        var p_id = select.menu_id;
	 		 	    	        $('#menus').treegrid('append',{
	 		 	    	        	parent: p_id,  // the node has a 'id' value that defined through 'idField' property
	 		 	    	        	data: [ ret.data]
	 		 	    	        });
	 		 	    	       $('#ff').form('clear');
	 		    	        }
	 		    	       
	 		    	    }
	 		    	});
	 		 		
	 		 	}
	 		 	 
		 
	 			</script>
	 		</shiro:hasPermission>
	 		<shiro:hasPermission name="/ma/updateMenu">
	 			<a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="updateMenu()"> 更新</a>
	 			<script type="text/javascript">
	 			function updateMenu(){ 
	 				var r = $('#menus').treegrid('getSelected');
	 		 		if(r && r.menu_id) {
	 		 			
	 		    		$('#ff').form('load' , r); 
	 		    		  
	 		    	} else {
	 		    		return ;
	 		    	}
	 		    	
	 		    	$('#menu_ma').dialog('open');
	 		    	
	 		    	$('#ff').form({
	 		    	    url: './updateMenu', 
	 		    	    success:function(data){
	 		    	       	var ret =JSON.parse(data) ;
	 		    	        //console.log(data.error + "  " + data.success);
	 		    	        if(ret.error) {
	 		    	        	 $.messager.alert('提示',ret.error,'warning');
	 		    	        }else if(ret.success) {
	 		    	        	$('#menu_ma').dialog('close');
	 		    	        	  
	 		 	    	        var mid = r.menu_id;
	 		 	    	        $('#menus').treegrid('update',{id: mid, row:ret.data });
	 		 	    	       $('#ff').form('clear');
	 		 	    	       
	 		 	    	      $.messager.show({
	 			       	  			title:'提示',
	 			       	  			msg: '更新成功' ,
	 			       	  			timeout:2000,
	 			       	  			showType:'slide'
	 			       	  		});
	 		    	        }
	 		    	       
	 		    	    }
	 		    	});
	 		 		
	 		 	}
	 	 
		 
	 			</script>
	 		</shiro:hasPermission>
	 		<shiro:hasPermission name="/ma/removeMenu">
	 			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeMenu()"> 删除</a>
	 			<script type="text/javascript">
	 			function removeMenu() {
	 		 		
	 		 		var select = $('#menus').treegrid('getSelected');
	 		    	if(select && select.menu_id) {
	 		    		
	 		    		$.messager.confirm('提示','您确定要删除:' + select.menu_name + " 这个菜单吗?",function(r){
	 		    		    if (r){
	 		    		    	 $.messager.progress({
	 		    		  		        title:'请稍等',
	 		    		  		        msg:'正在删除...'
	 		    		  		    });
	 		    		    		 $.ajax({  
	 		    		     	         url: './removeMenu' ,  
	 		    		     	         type: 'POST',  
	 		    		     	         data: {menu_id:select.menu_id},    
	 		    		     	         success: function (ret) {   
	 		    		     	       	  	if(ret && ret.error) { 
	 		    		     	       	  	 	$.messager.alert('提示',ret.error,'warning');
	 		    		     				} else if(ret && ret.success){ 
	 		    		     					//数据
	 		    		     					$.messager.show({
	 		    		     	       	  			title:'提示',
	 		    		     	       	  			msg: '删除成功' ,
	 		    		     	       	  			timeout:3000,
	 		    		     	       	  			showType:'slide'
	 		    		     	       	  		});
	 		    		     					
	 		    		     					//删除该子节点
	 		    		     					$('#menus').treegrid('remove',select.menu_id);
	 		    		     					
	 		    		     				}
	 		    		     	       	  	$.messager.progress('close');
	 		    		     	         },  
	 		    		     	         error: function (returndata) {  
	 		    		     	            // alert('fail:' + returndata);   
	 		    		     	             $.messager.progress('close');
	 		    		     	         } 
	 		    		     	    });   
	 		    		    }
	 		    		});
	 		    		 
	 		    	}
	 		 		
	 		 	}
	 	 
		 
	 			</script>
	 		</shiro:hasPermission>
	 		 
	 	</div>
   	 	
  </shiro:hasPermission>

  
  
 
</body>
</html>